<template>
  <div class="app-container">
    <el-row :gutter="24">
      <el-col :span="6">
        <el-card shadow="hover" body-style="{panding:'0px'}">
          <div class="grid-content bg-purple">
            <div>
              <img class="sta-img" src="../../assets/tab_4.png" />
            </div>
            <div>
              <p class="sta-font">总人数</p>
              <p class="sta-font">1次</p>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" body-style="{panding:'0px'}">
          <div class="grid-content bg-purple">
            <div>
              <img class="sta-img" src="../../assets/tab_4.png" />
            </div>
            <div>
              <p class="sta-font">培训次数</p>
              <p class="sta-font">1次</p>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" body-style="{panding:'0px'}">
          <div class="grid-content bg-purple">
            <div>
              <img class="sta-img" src="../../assets/tab_4.png" />
            </div>
            <div>
              <p class="sta-font">错题数</p>
              <p class="sta-font">1次</p>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" body-style="{panding:'0px'}">
          <div class="grid-content bg-purple">
            <div>
              <img class="sta-img" src="../../assets/tab_4.png" />
            </div>
            <div>
              <p class="sta-font">培训时长</p>
              <p class="sta-font">1次</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="12">
        <div
          class="grid-content bg-purple"
          id="main"
          style="height: 200px; padding: 0 0"
        ></div>
      </el-col>
      <el-col :span="12">
        <div
          class="grid-content bg-purple"
          id="main2"
          style="height: 200px; padding: 0 0"
        ></div>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="24">
        <el-form
          ref="form"
          :model="form"
          label-width="80px"
          style="height: 100px"
        >
          <el-form-item label="错题名称">
            <el-input v-model="form.content"> </el-input>
          </el-form-item>
          <el-form-item label="筛选时间">
            <el-col :span="11">
              <el-date-picker
                v-model="form.startDate"
                align="right"
                type="date"
                placeholder="开始日期"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-date-picker
                v-model="form.endDate"
                align="right"
                type="date"
                placeholder="结束日期"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </el-col>
          </el-form-item>
          <el-col :span="11">
            <el-form-item>
              <el-button type="primary" @click="searchTable(form)"
                >搜索</el-button
              >
              <el-button type="primary" @click="emptySearch(form)"
                >重置</el-button
              >
            </el-form-item>
          </el-col>
        </el-form>
      </el-col>
      <el-col :span="24">
        <el-table :data="tableData">
          <el-table-column prop="content" label="题目名"> </el-table-column>
          <el-table-column prop="quType" label="题目类型"> </el-table-column>
          <el-table-column prop="levelId" label="难度"> </el-table-column>
          <el-table-column prop="createTime" label="创建时间">
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="24" :offset="17">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 15, 30]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Dashboard",
  data() {
    return {
      currentRole: "adminDashboard",
      form: {
        content: "",
        startDate: "",
        endDate: "",
      },
      tableData: [],
      currentPage: 1,
      total: 1,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.drawChart();
    this.drawChart2();
    this.queryAll(this.form);
  },
  methods: {
    handleSizeChange(val) {},
    handleCurrentChange(val) {
      //当前页
      this.currentPage = val;
      //刷新表格
      this.queryAll(this.form);
    },
    drawChart() {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      let myChart = this.$echarts.init(document.getElementById("main"), {
        height: 100,
      });
      window.addEventListener("resize", function () {
        myChart.resize();
      });
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: "人员数量",
        },
        tooltip: {},
        legend: {
          data: ["人数"],
        },
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "人数",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    drawChart2() {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      let myChart = this.$echarts.init(document.getElementById("main2"), {
        height: 100,
      });
      window.addEventListener("resize", function () {
        myChart.resize();
      });
      // 指定图表的配置项和数据
      let option2 = {
        title: {
          text: "错题数",
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option2);
    },

    queryAll(params) {
      this.$http
        .post("/qu/queryAll", {
          current: this.currentPage,
          size: 10,
          startDate: params.startDate,
          endDate: params.endDate,
          searchValue: params.content,
        })
        .then((res) => {
          console.log(res)
          this.tableData = res.data.records;
          this.currentPage = res.data.current;
          this.total = res.data.total;
        })
        .catch((e) => {
          console.log(e);
        });
    },
    searchTable(data) {
      this.queryAll(data);
    },
    emptySearch(form) {
      form.content = "";
      form.startDate = "";
      form.endDate = "";
    },
  },
};
</script>

<style scoped>
.box {
  height: calc(100vh - 120px);
  font-size: 14px;
  line-height: 28px;
}
.title {
  font-size: 18px;
  font-weight: 700;
  padding-bottom: 10px;
  padding-top: 20px;
  margin-bottom: 10px;
  border-bottom: #eee 1px dotted;
}

.tags span {
  margin-right: 10px;
}

.box a {
  color: #20a0ff;
}

.box a:hover {
  color: #ff0000;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: hwb(210 95% 5%);
}
.bg-purple {
  border: 0px solid cornflowerblue;
  height: 200px;
}
.bg-purple-light {
}
.app-container {
  height: 100%;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 60px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.sta-img {
  width: 100px;
  height: 100px;
}
.sta-font {
  font-size: 20px;
  color: #20a0ff;
}
</style>
